<template>
  <div>
    <div @click="open" class="personList">
      <div class="circle" :title="s.name" v-for="s in selected" :key="s.userId">
        {{s.name.substr(s.name.length-2,2)}}
      </div>
      <div class="circle2" title="增加用户">+</div>
    </div>
    <ChosenPerson :isOpen="openModal" :selected="selected" @modalClose="modalClose" @selectChange="selectChange" />
  </div>
</template>
<script>
  import ChosenPerson from "./personModal";
  import {
    deepClone
  } from "../../lib/utils";
  export default {
    props: {
      clear: {
        type: Boolean
      }
    },
    components: {
      ChosenPerson
    },
    data() {
      return {
        openModal: false,
        selected: []
      }
    },
    methods: {
      /**@function
       * 打开模态框
       */
      open() {
        this.openModal = true;
      },
      selectChange(val) {
        this.selected = null;
        this.selected = deepClone(val);
        this.$emit('change', this.selected);
      },
      /**@function
       * 关闭模态框
       */
      modalClose(val) {
        this.openModal = val;
      }
    },
    watch: {
      clear(newval) {
        if (newval) {
          this.selected = [];
          this.$emit('clearFinish');
        }
      }
    }
  }

</script>

<style scoped>
  .personList {
    width: inherit;
    height: 32px;
    display: flex;
  }

  .circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #409EFF;
    color: #fff;
    text-align: center;
    margin-right:10px;
    font-size:12px;
  }
  .circle2 {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: #fff;
    text-align: center;
    border:1px solid #d8d8d8;
    line-height: 30px;
    color:#ddd;
    margin-left: 10px;
    cursor: pointer;
  }

</style>

